<template>
  <div class="page_container">
    <div class="search">
      <el-input v-model="currentCardName" placeholder="模糊搜索库"></el-input>
    </div>
    <div class="card_box">
      <CardCom
        class="card"
        v-for="(item, index) in filterLib"
        :key="index"
        :obj="item"
        @click.native="goDetailPage(item)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "homeIndex",
  data() {
    return {
      currentCardName: "",
      lib: [],
    };
  },
  computed: {
    filterLib() {
      if (!this.currentCardName) {
        return this.lib;
      } else {
        // lib：是请求到的数组   inputValue：搜索的字段    item.title：要匹配的字段
        return this.lib.filter((item) => {
          let inputValue = new RegExp(
            `(.*)(${this.currentCardName.split("").join(")(.*)(")})(.*)`,
            "i"
          );
          return item.title.match(inputValue);
        });
      }
    },
  },
  methods: {
    // 去详细的页面
    goDetailPage(item) {
      item?.path && this.$router.push(item.path + `?title=${item.title}`);
    },
  },
  mounted() {
    // 从 router 中 动态生成 cardList
    this.lib = this.$router.options.routes[0].children
      .filter((item) => item.meta)
      .map((item) => {
        return {
          title: item.meta.title,
          description: item.meta.description,
          path: item.path,
        };
      });
  },
};
</script>

<style scoped lang="scss">
.page_container {
  .search {
    width: 200px;
    height: 60px;
    position: fixed;
    top: 10px;
    right: 20px;
  }
  .card_box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    // border: 1px solid #ededed;
    max-height: 800px;
    overflow: scroll;
    .card {
      width: calc((100% - 60px) / 4);
      margin-right: 20px;
      margin-bottom: 20px;
      cursor: pointer;
      &:nth-of-type(4n) {
        margin-right: 0;
      }
    }
  }
}
</style>
